$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;
.home .types a{
    width: 16.6vw !important;
}
.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .t {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: $fontSize_54;
      font-weight: 700;
    }

    .add {
      position: absolute;
      left: 50%;
      bottom: 30%;
      transform: translateX(-50%);
      z-index: 10;
      transition: all 600ms;
      img{
        width: 60/$f+vw;
      }
      &:hover {
        transform:translateX(-50%) rotate(180deg);
      }
    }
  }

  .types {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    align-items: center;
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 10;
    span {
      width: 1px;
      height: 1.5vw;
      background: #E6E6E6;
    }

    a {
      width: 15vw;
      color: #666;
      font-size: $fontSize_16;
      text-align: center;
      position: relative;
      padding: 1.5vw 0;
      transition: all 600ms;

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 0;
        height: 3px;
        background: #79C536;
        transition: all 600ms;
      }

      &:hover {
        color: #79C536;
      }
    }

    .active {
      color: #79C536;

      &::after {
        width: 100%;
      }
    }
  }

  .section1{
    position: relative;
    z-index: 1;
  
    img{
        object-fit: cover;
    }
    padding: 0 0 7.8vw 0;
    .wrap{
        margin: auto;
        .top{
          position: relative;
          margin: 0 0 100/$f+vw;
          padding: 5vw 0 0 0;
          .bg{
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
          }
          .title{
              text-align: center;
              font-size: 42/$f+vw;
              color: #000;
              font-weight: bold;
              margin: 0 0 81/$f+vw;
              padding: 0 0 40/$f+vw;
              position: relative;
              &::after{
                content: '';
                position: absolute;
                width: 100/$f+vw;
                height: 1px;
                background-color: #79C536;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
              }
          }

          .text{
            width: 1200/$f+vw;
            font-size: 18/$f+vw;
            line-height: 38/$f+vw;
            margin: auto;
            text-indent: 35/$f+vw;
          }
        }
        .figure{
          height: 339/$f+vw;
          position: relative;
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          &::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            background: linear-gradient(280deg, rgba(146, 211, 65, 0.60) -27.68%, rgba(79, 173, 36, 0.60) 104.15%);
backdrop-filter: blur(2px);
          }
          .position{
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
          }
          .item{
            position: relative;
            z-index: 2;
            text-align: center;
            &:not(:last-child) {
              margin: 0 220/$f+vw 0 0;
              &::after{
                content: '';
                position: absolute;
                width: 1px;
                height: 11/$f+vw;
                background: rgba(255, 255, 255, 0.23);
                top: 50%;
                transform: translateY(-50%);
                right: -100px;
              }
            }
            span{
              font-size: 79/$f+vw;
              font-weight: 700;
              line-height: 92/$f+vw; 
              color: #fff;
              position: relative;
              &::after{
                content: attr(data-text);
                position: relative;
                top: 7/$f+vw;
              }
              &::before{
                content: attr(data-text2);
                position: absolute;
                left: 105%;
                font-size: 16/$f+vw;
                white-space: nowrap;
                bottom: -30/$f+vw;
              }
            }
            p{
              font-size: 20/$f+vw;
              color: #fff;
            }
          }
        }
     
    }
  }

  .section2{
    position: relative;
    z-index: 1;
    padding: 76/$f+vw 0 183/$f+vw 0;
    img{
      object-fit: cover;
    }
    .bg{
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
    .wrap{
      width: 1275/$f+vw;
      margin: auto;
      .title{
        text-align: center;
        font-size: 42/$f+vw;
        color: #2E2F34;
        font-weight: bold;
        margin: 0 0 75/$f+vw;
      }
      .content{
        display: flex;
        align-items: center;
        justify-content: center;
        .img{
          width: 563/$f+vw;
          margin: 0 64/$f+vw 0 33/$f+vw;
          img{
            width: 100%;
            object-fit: contain;
          }
        }
        .flex{
          width: 306/$f+vw;
          .list{
            width: 100%;
            height: 112/$f+vw;
            background: #D55E2F;
            display: flex;
            align-items: center;
            border: 1px solid transparent;
            &>div{
              margin: 0 20/$f+vw;
            }
            &:nth-child(2n) {
              border: 1px solid #D55E2F;
              background: #FFF;
              h1{
                color: #000;
              }
              p{
                color: #666;
              }
            }
            h1{
              font-size: 20/$f+vw;
              color: #fff;
              margin: 0 0 5/$f+vw;
            }
            p{
              font-size: 16/$f+vw;
              color: #fff;
            }
           
          }
          &:last-child{
            .list{
              background: #344A83;
              &:nth-child(2n) {
                border: 1px solid #344A83;
                background: #FFF;
              }
            }
          }
        }
      }
    }
  }
 

  .section3{
    padding: 100/$f+vw 0 115/$f+vw 0;
    overflow: hidden;
    .wrap{
      .title{
        font-size: 42/$f+vw;
        color: #000;
        font-weight: bold;
        text-align: center;
        margin: 0 0 70/$f+vw;
      }
      .content{
        position: relative;
        .img{
          position: absolute;
          bottom: -7/$f+vw;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;
          pointer-events: none;
          width: 1756/$f+vw;
          display: flex;
          justify-content: space-between;
          img{
            width: 26/$f+vw;
          }
        }
        &::after{
          content: '';
          position: absolute;
          width: 100vw;
          height: 1px;
          left: 50%;
          transform: translateX(-50%);
          background-color: #E2E2E2;
          bottom: 4/$f+vw;
        }
        .small_swiper{
          width: 1500/$f+vw;
          margin: auto;
          .swiper-slide{
            padding: 0 20/$f+vw;
            box-sizing: border-box;
            cursor: pointer;
            .year{
              width: 56/$f+vw;
              height: 56/$f+vw;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              color: #333;
              font-size: 18/$f+vw;
              position: relative;
              z-index: 1;
              margin: 25/$f+vw auto 25/$f+vw;
              transition: .6s;
              &::after{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                top: 0;
                left: 0;
                z-index: -1;
                background: linear-gradient(280deg, #92D341 -27.68%, #4FAD24 104.15%);
                opacity: 0;
                transition: .6s;
              }
              &::before{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                z-index: -1;
                background: linear-gradient(280deg, #92D341 -27.68%, #4FAD24 104.15%);
                transform: translate(-50%,-50%) scale(1);
                opacity: 0;
                transition: .6s;
              }
              @keyframes anmiate_transform {
                100%{
                  opacity: 0;
                  transform: translate(-50%,-50%) scale(1.7);
                }
              }
            }
            .center{
              .line{
                width: 1px;
                height: 20/$f+vw;
                background: #E2E2E2;
                margin: 0 auto 5px;
              }
              .circle{
                width: 8/$f+vw;
                height: 8/$f+vw;
                background: #E2E2E2;
                border-radius: 50%;
                margin: auto;
              }
            }

            &.on{
              .year{
                color: #fff;
                &::after,&::before{
                  opacity: 1;
                }
                &::before{
                  animation: anmiate_transform 1s linear infinite;
                }
              }
            }
          }
          
        }
      }

      .content2{
        width: 1400/$f+vw;
        margin: 80/$f+vw auto 0;
        position: relative;
        .button{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          z-index: 2;
          pointer-events: none;
          width: 100%;
          display: flex;
          justify-content: space-between;
          img{
            width: 9/$f+vw;
            cursor: pointer;
            pointer-events: auto;
          }
        }
        .big_swiper{
          width: 1280/$f+vw;
          margin: auto;
          .swiper-slide{
            padding: 20/$f+vw;
            box-sizing: border-box;
            .item{
              display: flex;
              background: #fff;
              .img{
                width: 405/$f+vw;
                height: 256/$f+vw;
                overflow: hidden;
                img{
                  width: 100%;
                  transition: all .6s;
                  &:hover{
                    transform: scale(1.05);
                  }
                }
              }
              .color{
                position: relative;
                flex: 1;
                .text{
                  margin: 18/$f+vw 0 0 44/$f+vw;
                  font-size: 20/$f+vw;
                  line-height: 36/$f+vw;
                  color: #333;
                }
                .num{
                  background: linear-gradient(339deg, rgba(146, 211, 65, 0.04) 9.4%, rgba(79, 173, 36, 0.20) 75.04%);
                  background-clip: text;
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  position: absolute;
                  right: 0;
                  bottom: -57/$f+vw;
                  font-size: 170/$f+vw;
                  font-weight: bold;
                }
              }
              
            }
          }
        }
      }
    }
  }

  .section4{
    padding: 100/$f+vw 0 227/$f+vw 0;
    background: #F6FAF6;
    .wrap{
      width: 1632px;
      margin: auto;
      max-width: 90%;
      .title{
        font-size: 42/$f+vw;
        color: #000;
        text-align: center;
        margin: 0 0 120/$f+vw;
        font-weight: bold;
      }
      .content{
        position: relative;
        .button{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 2;
          pointer-events: none;
          width: 100%;
          display: flex;
          justify-content: space-between;
          img{
            width: 72px;
            cursor: pointer;
            pointer-events: auto;
          }
        }
        .swiper3{
          width: 1000px;
          margin: auto;
          max-width: 90%;
          .swiper-slide{
            img{
              width: 100%;
              object-fit: contain;
              transition: .6s;
              &:hover{
                transform: scale(1.02);
              }
            }
          }
        }
      }
    }
    
  }

  .section5{
    padding: 100/$f+vw 0;
    .wrap{
        width: 75vw;
        margin: auto;
        .title{
          text-align: center;
          margin: 0 0 40/$f+vw;
          h1{
            font-size: 42/$f+vw;
            color: #000;
            margin: 0 0 20/$f+vw;
          }
          p{
            width: 796/$f+vw;
            margin: auto;
            color: #666;
            font-size: 18/$f+vw;
          }
        }
        .content{
          display: flex;
          justify-content: space-between;
          .item{
            width: 468/$f+vw;
            .img{
              width: 100%;
              height: 264/$f+vw;
              position: relative;
              overflow: hidden;
              .position{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                color: #fff;
                font-size: 18/$f+vw;
                opacity: 0;
                transition: .6s;
                background: linear-gradient(0deg, rgba(129, 174, 57, 0.81) 0%, rgba(129, 174, 57, 0.81) 100%);
              }
              img{
                width: 100%;
                height: 100%;
                transition: all .6s;
              }
              &:hover{
                .position{
                  opacity: 1;
                }
                img{
                  transform: scale(1.05);
                }
              }
            }
            .text{
              margin: 26/$f+vw 0 0 0;
              text-align: center;
              font-size: 24/$f+vw;
              color: #000;
            }
            &:nth-child(2) {
              .img{
                .position{
                  background: linear-gradient(0deg, rgba(52, 74, 131, 0.8) 0%, rgba(52, 74, 131, 0.8) 100%);
                }
              }
            }
            &:nth-child(3) {
              .img{
                .position{
                  background: linear-gradient(0deg, rgba(213, 94, 47, 0.8) 0%, rgba(213, 94, 47, 0.8) 100%);
                }
              }
            }
          }
        }
    }
  }

  .section6{
    padding: 120/$f+vw 0 ;
    background: #F5F5F5;
    .wrap{
      width: 75vw;
      margin: auto;
      .title{
        text-align: center;
        margin: 0 0 30/$f+vw;
        h1{
          font-size: 42/$f+vw;
          color: #000;
          font-weight: bold;
          margin: 0 0 20/$f+vw;
        }
        p{
          width: 947/$f+vw;
          margin: auto;
          font-size: 18/$f+vw;
          color: #666;
        }
      }
      .content{
        display: flex;
        height: 506/$f+vw;
        .img{
          width: 740/$f+vw;
          height: 100%;
          position: relative;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
            position: relative;
            transition: .6s;
            opacity: 0;
            pointer-events: none;
            transition: all .6s;
            &:hover{
              transform: scale(1.05);
            }
            &:not(:first-child) {
              position: absolute;
              top: 0;
              left: 0;
            }
            &.on{
              opacity: 1;
              pointer-events: auto;
            }
          }
        }
        .r{
          width: 700/$f+vw;
          height: 100%;
          .item{
            width: 100%;
            height: 50%;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            transition: .6s;
            &.on{
              background-color: #79C536;
              .jt{
                opacity: 1;
              }
              div{
                h1{
                  color: #fff;
                  &::after{
                    opacity: 1;
                  }
                }
                p{
                  color: #fff;
                }
              }
            }
            .jt{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: -22/$f+vw;
              width: 22/$f+vw;
              z-index: 2;
              opacity: 0;
              transition: .6s;
            }
            div{
              width: 552/$f+vw;
              h1{
                font-size: 24/$f+vw;
                color: #000;
                margin: 0 0 18/$f+vw;
                position: relative;
                transition: .6s;
                &::after{
                  content: '';
                  position: absolute;
                  top: 13/$f+vw;
                  width: 9/$f+vw;
                  height: 9/$f+vw;
                  border-radius: 50%;
                  background-color: #fff;
                  left: -22/$f+vw;
                  opacity: 0;
                  transition: .6s;
                }
              }
              p{
                font-size: 14/$f+vw;
                transition: .6s;
                color: #666;
              }
            }
          }
        }
      }
    }
  }

  .section7{
    padding: 102/$f+vw 0 130/$f+vw 0;
    .wrap{
      width: 75vw;
      margin: auto;
      .title{
        text-align: center;
        font-size: 32/$f+vw;
        color: #000;
        margin: 0 0 42/$f+vw;
        font-weight: bold;
      }
      .content{
        position: relative;
      }
      .button{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 2;
        pointer-events: none;
        width: 110%;
        justify-content: space-between;
        display: none;
        img{
          width: 72px;
          cursor: pointer;
          pointer-events: auto;
          filter: brightness(.95);
        }
      }
      .swiper4{
        .img{
          width: 100%;
          overflow: hidden;
          img{
            width: 100%;
            transition: all .6s;
            &:hover{
              transform: scale(1.05);
            }
          }
        }
        .text{
          margin: 20/$f+vw 0 0 0;
          text-align: center;
          font-size: 24/$f+vw;
          color: #000;
          font-weight: bold;
        }
      }
    }
  }
  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      .bg{
        img{
          height: 300px;
        }
      }
      .t{
        font-size: 20px;
      }
      .add{
        bottom:25%;
        img{
          width:20px;
        }
      }
    }
    .types{
      flex-wrap: wrap;
      a{
        width: 33% !important;
        font-size: 14px;
        padding: 10px 0;
        &::after{
          height: 2px;
        }
      }
      span{
        height: 10px;
      }
    }


    .section1{
      padding: 35px 0;
      .wrap{
        .top{
          padding: 0;
          .title{
            font-size: 24px;
            margin: 0 0 25px;
            &::after{
              width: 100px;
              bottom: -10px;
            }
          
          }
          .text{
            font-size: 14px;
            line-height: 2;
            width: 90%;
          }
        }
        .figure{
          height: 200px;
          .item{
            position: relative;
            left: -30px;
            span{
              width: fit-content;
              font-size: 32px;
              line-height: 1;
              margin: 0 0 10px;
              &::after,&::before {
                font-size: 14px;
              }
              &::after{
                top: 0px;
              }
              &::before{
                top: 15px;
              }
            }
            p{
              font-size: 14px;
            }
          }
        }
      }
    }
    
    .section2{
      padding: 35px 0;
      .wrap{
        width: 90%;
        .title{
          font-size: 24px;
          margin: 0 0 30px;
        }
        .content{
          display: block;
          white-space: nowrap;
          overflow-x: scroll;
          .flex{
            width:280px;
            display: inline-block;
            .list{
              height: auto;
              padding: 25px 0;
              &>div{
                margin: 0 0 0 5%;
                h1{
                  font-size: 18px;
                  margin: 0 0 5px;
                }
                p{
                  font-size: 14px;
                  line-height: 2;
                }
              }
            }
          }
          .img{
             display: inline-block;
             width: 300px;
             margin: 0 20px;
              img{
                transform: translateY(-80%);
              }
          }
        }
      }
    }

    .section3{
      padding: 45px 0;
      .wrap{
        .title{
          font-size: 24px;
          margin: 0 0 20px;
        }
        .content{
          &::after{
            bottom: 3px;
          }
          .img{
            display: none;
          }
          .small_swiper {
            .swiper-slide{
              padding: 30px 0 0 0;
              .year{
                width: 50px;
                height: 50px;
                font-size: 14px;
                margin: 0 auto 20px;
              }
              .center{
                .line{
                  width: 1px;
                  height: 20px;
                  margin: 0 auto 10px;
                }
                .circle{
                  width: 8px;
                  height: 8px;
                }
              }
            }
          }
        }

        .content2{
          width: 90%;
          .button{
            img{
              width: 10px;
            }
          }
          .big_swiper{
            width: 90%;
            .swiper-slide{
              .item{
                flex-direction: column;
                .img{
                  width: 100%;
                  height: auto;
                }
                .color{
                  .text{
                    font-size: 14px;
                    line-height: 2;
                    margin: 5%;
                  }
                  .num{
                    font-size: 60px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .section4{
      padding: 35px 0;
      .wrap{
        .title{
          font-size: 24px;
          margin: 0 0 20px;
        }
        .content{
          .swiper3{
            width: 70%;
          }
          .button{
            img{
              width: 40px;
            }
          }
        }
      }
    }

    .section5{
      padding: 45px 0;
      .wrap{
        width: 90%;
        .title{
          margin: 0 0 25px;
          h1{
            font-size: 22px;
            margin: 0 0 10px;
          }
          p{
            width: 100%;
            font-size: 14px;
            line-height: 2;
          }
        }
        .content{
          flex-direction: column;
          .item{
            width: 100%;
            margin: 0 0 25px;
            
            .img{
              height: auto;
              .position{
                font-size: 14px;
                line-height: 2;
                opacity: 1;
            }
            }
            .text{
              font-size: 16px;
              margin: 15px 0 0 0;
            }
          }
        }
      }
    }

    .section6{
      padding: 35px 0;
      .wrap{
        width: 90%;
        .title{
          h1{
            font-size: 24px;
            margin: 0 0 10px;
          }
          p{
            width: 100%;
            font-size: 13px;
            line-height: 2;
          }
        }
        .content{
          flex-direction: column;
          height: auto;
          .img{
            width: 100%;
            height: auto;
          }
          .r{
            width: 100%;
            .item{
              height: auto;
              padding: 30px 0;
              .jt{
                display: none;
              }
              div{
                width: 90%;
                h1{
                  font-size: 14px;
                  margin: 0 0 10px;
                  &::after{
                    display: none;
                  }
                }
                p{
                  font-size: 13px;
                  line-height: 2;
                }
              }
            }
          }
        }
      }
    }

    .section7{
      padding: 50px 0;
      .wrap{
        width: 90%;
        .title{
          font-size: 24px;
          margin: 0 0 20px;
        }
        .button{
          display: flex!important;
          img{
            width: 40px;
          }
        }
        .swiper4{
          width: 76%;
          margin: auto;
          .text{
            font-size: 15px;
            margin: 15px 0 0 0;
          }
        }
      }
    }
  }
}